<template>
  <div>
    <ol>
      <li v-for="(v, i) in newsList" :key="i">
        <router-link :to="{ name:'NewsInfo',query: { id: v.id } }">
          {{v.title}}
        </router-link>
      </li>
      <router-view :newsList="newsList"></router-view>
      <!-- <li v-for="(v, i) in newsList"-->
      <!-- :key="i"-->
      <!-- @click="getNewsMessage(v)"-->
      <!-- style="cursor:pointer;">-->
      <!-- {{v.title}}-->
      <!-- </li>-->
      <!-- <li v-for="(v, i) in newsList" :key="i">-->
      <!-- <router-link :to="{ name:'News',query: { id: v.id } }">-->
      <!-- {{v.title}}-->
      <!-- </router-link>-->
      <!-- </li>-->
    </ol>
     <h1>{{news.message}}</h1>
     <!--<h1>{{newsInfo}}</h1>-->

  </div>
</template>

<script>
  export default {
    name: "News1",
    data() {
      return {
        newsList: [
          {id: 1, title: "大连新闻", message: "大连好"},
          {id: 2, title: "辽宁新闻", message: "沈阳下雪了"},
          {id: 3, title: "北京新闻", message: "北京开会了"}
        ],
        news: {},
        // newsInfo:""
      };
    },
    beforeRouteUpdate(to, from, next) {
    this.getNewsInfo(to.query.id);
    next();
    },
    methods: {
      // getNewsMessage(v) {
      //   this.news = v
      getNewsInfo(id) {
        for (let i = 0; i < this.newsList.length; i++) {
          if (this.newsList[i].id == id) {
            this.newsInfo = this.newsList[i].message;
          }
        }
      }
      },


  };
</script>

<style scoped></style>
